<template>
  <div>
    <el-row :gutter="10">
      <el-col :sm="12" :md="8" :lg="6">
        <div>1</div>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <div>2</div>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <div>3</div>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <div>4</div>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <div>5</div>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <div>6</div>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <div>7</div>
      </el-col>
      <el-col :sm="12" :md="8" :lg="6">
        <div>8</div>
      </el-col>
    </el-row>
    <el-row>
      <!-- :span="16" 固定占的份数 -->
      <el-col :span="16">
        <div>hello</div>
      </el-col>
      <el-col :span="8">
        <div>world</div>
      </el-col>
    </el-row>
    <hr>
    Type a number: <input v-model.number="number" />
    <p>{{ tweened.number.toFixed(0) }}</p>
    <el-button class='hidden-md-and-down' @click="number = 9999999">改成9999999</el-button>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'
const number = ref(0)
const tweened = reactive({
  number: 0
})
watch(number, (n) => {
  gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
})

</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}


.el-col {
  border: 1px solid red;
  border-radius: 4px;
}
</style>
